<template>
    <div>
        <div class="user-info-box">
            <img :src="passImg" alt="pass-img" class="pass-img">
            <div class="text">已通过认证</div>
            <CellGroup class="user">
                <Field
                        v-model="name"
                        label="姓名"
                        :readonly="true"
                        class="user-item acea-row row-middle"
                />
                <Field
                        v-model="IDCard"
                        label="身份证"
                        :readonly="true"
                        class="user-item acea-row row-middle"
                />
            </CellGroup>
        </div>
        <Button text="确定" color="#0DCDB5" native-type="submit" class="outh-btn" @click="goHome"/>
    </div>
</template>

<script>
    import {Field, CellGroup,Button} from 'vant';
    import {mapActions, mapGetters} from "vuex";

    const loadImg = name => require(`@/assets/images/${name}.png`)
    export default {
        name: "OuthInfo",
        components: {
            Field,
            CellGroup,
            Button
        },
        data() {
            return {
                name: '',
                IDCard: '',
                passImg: loadImg('outh_pass')
            }
        },
        computed:{
          ...mapGetters(['userInfo'])
        },
        watch:{
            '$route':'init'
        },
        mounted() {
            this.init()
        },
        methods:{
            ...mapActions(['USERINFO']),
            init(){
                this.name = this.$route.params.name;
                this.IDCard = this.$route.params.IDCADE;
            },
            goHome(){
                this.USERINFO(this.userInfo.umId).then(()=>{
                    this.$router.replace('/');
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .user-info-box {
        width: 335px;
        height: 352px;
        background: rgba(255, 255, 255, 1);
        border-radius: 8px;
        margin: 20px auto 0;
        overflow: hidden;

        .pass-img {
            width: 100px;
            height: 100px;
            display: block;
            margin: 40px auto 15px;
        }

        .text {
            font-size: 16px;
            font-weight: 400;
            color: rgba(13, 205, 181, 1);
            text-align: center;
        }

        .user {
            width: 255px;
            height: 135px;
            margin: 25px auto 0;

            .user-item {
                height: 50%;
            }
        }
    }
    .outh-btn{
        width:305px;
        height:50px;
        border-radius:6px;
        display: block;
        margin: 50px auto 0;
    }
</style>
